<!-- components/OrderCard.vue -->
<template>
  <el-card class="order-card" shadow="never">
    <!-- Top section: Unchanged -->
    <div class="card-header">
      <div class="header-info">
        <span class="info-item">{{ order.createTime }}</span>
        <span class="info-item">订单号: {{ order.saleOrderCode }}</span>
        <span class="info-item status">{{ order.orderStatus }}</span>
      </div>
      <div class="header-progress">
         <span class="progress-text">已生产 {{ order.overallPercentage }}%</span>
        <el-progress
          :percentage="order.overallPercentage" 
          :show-text="false"
          color="#86efac"
          class="progress-bar"
        />
      </div>
    </div>

    <el-divider />

    <!-- Bottom section: Modified to use el-icon -->
    <div class="card-body">
      <div class="product-images">
        <!-- 循环显示产品占位图标 -->
        <div
          v-for="product in displayedProducts"
          :key="product.id"
          class="product-icon-placeholder"
        >
          <el-icon :size="30" color="#909399">
            <!-- 根据产品ID动态选择一个图标 -->
            <component :is="getIconComponent(product.id)" />
          </el-icon>
        </div>

        <!-- 如果产品数量超过3个，显示省略号 -->
        <span v-if="order.orderItems?.length > 3" class="more-products">...</span>
      </div>

      <el-link type="primary" :icon="View" @click="onViewDetailsClick">
        查看明细
      </el-link>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { ElCard, ElDivider, ElProgress, ElIcon, ElLink } from 'element-plus';
// 引入你想要用作占位符的图标
import {
  View,
  Goods,
  Box,
  Cpu,
  Coin,
  Monitor,
  Headset,
  Wallet,
} from '@element-plus/icons-vue';
import { OrderVO } from '@/api/ordermange';


// 定义订单的数据结构
// 定义组件的 props
const props = defineProps<{
  order: OrderVO;
}>();

// 定义组件的 emits 事件
const emit = defineEmits(['view-details']);

// 将所有可用的占位图标放入一个数组
const placeholderIcons = [Goods, Box, Cpu, Coin, Monitor, Headset, Wallet];

/**
 * 根据产品ID选择一个图标。
 * 使用取模运算 (%) 来确保无论ID是什么，总能从数组中获得一个有效的图标。
 * @param productId 产品ID
 * @returns 一个Vue图标组件
 */
const getIconComponent = (productId: number) => {
  const index = productId % placeholderIcons.length;
  return placeholderIcons[index];
};

// 计算属性，只展示前3个产品
const displayedProducts = computed(() => {
  return props.order.orderItems?.slice(0, 3) || [];
});

// "查看明细" 的点击事件处理
const onViewDetailsClick = () => {
  emit('view-details', props.order.id);
};
</script>

<style scoped>
/* 其他样式保持不变 */
.order-card {
  border: 1px solid #e4e7ed;
  background-color: #f9fafb;
}
:deep(.el-card__body) { padding: 16px; }
.card-header, .card-body { display: flex; justify-content: space-between; align-items: center; }
.card-header { font-size: 14px; color: #606266; }
.header-info { display: flex; align-items: center; gap: 24px; }
.header-info .status { color: #303133; font-weight: bold; }
.header-progress { display: flex; align-items: center; gap: 12px; }
.progress-bar { width: 180px; }
.el-divider { margin: 12px 0; }
.product-images { display: flex; align-items: center; gap: 12px; }
.more-products { font-size: 20px; font-weight: bold; color: #909399; padding: 0 5px; }
.el-link { font-size: 14px; }

/* 新增：产品图标占位符的样式 */
.product-icon-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  /* 使用flex布局让图标居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
